<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input
          v-model="getSearchInfo.keyword"
          placeholder="字典key值/code/名称"
          style="width:200px;marginLeft:3px;"
        />
        <el-button type="primary" style="marginLeft:3px;" @click="searchInfo">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createDic"
        class="right"
        type="primary"
        @click="createDic"
      >新建字典</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe :height="this.$getTableHeight">
      <el-table-column show-overflow-tooltip label="字典key值">
        <template slot-scope="scope">{{ scope.row.dicKey?scope.row.dicKey:'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column prop="dicCode" show-overflow-tooltip label="字典code" />
      <el-table-column prop="dicName" show-overflow-tooltip label="字典名称" />
      <el-table-column prop="description" show-overflow-tooltip label="描述" />
      <el-table-column prop="sort" show-overflow-tooltip label="排序" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.editDic"
              style="color:#409eff;margin-right:10px;"
              type="primary"
              icon="el-icon-delete"
              @click="editDic(scope.row)"
            >编辑</span>
            <span
              v-if="accreditChildren.delDic"
              style="color:#f56c6c;margin-right:10px;"
              type="danger"
              icon="el-icon-delete"
              @click="deleteDic(scope.row)"
            >删除</span>
            <span
              v-if="accreditChildren.createDic"
              style="color:#67c23a"
              type="danger"
              icon="el-icon-plus"
              @click="createChildrenDic(scope.row)"
            >添加子项</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      center
      :title="isEditor?'编辑字典':'新建字典'"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      :before-close="cancelDicInfo"
      width="30%"
    >
      <el-form
        ref="form1"
        :rules="rules"
        :model="dicline"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="字典key值:">
          <el-input v-model="dicline.dicKey" disabled placeholder="请输入字典键值" />
        </el-form-item>
        <el-form-item label="字典Code:" prop="dicCode">
          <el-input v-model="dicline.dicCode" :disabled="isEditor" placeholder="请输入字典Code" />
        </el-form-item>
        <el-form-item label="字典名称:" prop="dicName">
          <el-input v-model="dicline.dicName" placeholder="请输入字典名称" @change="changeDicName" />
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="dicline.sort" placeholder="排序" />
        </el-form-item>
        <el-form-item label="描述:">
          <el-input
            v-model="dicline.description"
            type="textarea"
            maxlength="50"
            resize="none"
            show-word-limit
            placeholder="描述"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDicInfo">取 消</el-button>
        <el-button type="primary" @click="submitDicInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl'
import {
  reduceArr,
  createDics,
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  changeTableHeight
} from '~/utils/util'
import Pagination from '~/components/commom/pagination'
import regular from '~/utils/regular'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      rules: {
        dicCode: regular.dicCode,
        dicName: regular.dicName,
        sort: regular.sort
      },
      loading: true,
      changeSelectOr: false,
      change: false,
      accreditArr: [], // 是否有新增，修改删除等功能
      accreditChildren: {},
      dics: [],
      projectType: [],
      tableData: [], // talbe表格数据
      businessCategory: [],
      category: [],
      totalCount: 0,
      getSearchInfo: {
        // 筛选条件
        keyword: ''
      },
      copyGetSearchInfo: {
        keyword: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      dialogTableVisible: false,
      dicline: {
        id: '',
        dicKey: '',
        dicCode: '',
        dicName: '',
        sort: 0,
        description: '',
        parentId: ''
      },
      isEditor: false
    }
  },
  mounted() {
    this.initGetDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
    
  },
  methods: {
    searchInfo(res) {
      this.copyGetSearchInfo = JSON.parse(JSON.stringify(this.getSearchInfo))
      const result = _searchInfo(res, this.page, this.copyGetSearchInfo)
      this.changeTableData(result)
    },
    handleSelectionChange(val) {
      if (val.length) {
        this.changeSelectOr = true
      } else {
        this.changeSelectOr = false
      }
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.dic.getDics, res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copyGetSearchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copyGetSearchInfo)
      this.changeTableData(result)
    },
    deleteDic(row) {
      const that = this
      _deleteMethods(mmUrl.dic.deleteDic, row, that).then(() => {
        that.searchInfo('no')
      })
    },
    initGetDate() {
      const data = {}
      data.page = JSON.parse(JSON.stringify(this.page))
      Object.assign(data, this.getSearchInfo)
      this.$post({
        url: mmUrl.dic.pageLoad,
        data: data
      }).then(res => {
        this.totalCount = res.items.totalCount
        this.tableData = res.items.items
        this.loading = false
        changeTableHeight(this)
      })
    },
    changeDicName() {
      if (this.isEditor) return
      if (this.dicline.parentId) {
        this.dicline.dicKey = this.dicline.dicKey + '_' + this.dicline.dicName
      } else {
        this.dicline.dicKey = this.dicline.dicName
      }
    },
    createDic() {
      this.dialogTableVisible = true
      this.isEditor = false
    },
    createChildrenDic(row) {
      this.dicline.parentId = row.id
      this.dicline.dicKey = row.dicKey
      this.dialogTableVisible = true
      this.isEditor = false
    },
    cancelDicInfo() {
      this.$refs['form1'].resetFields()
      this.dialogTableVisible = false
      this.dicline.id = '';
      this.dicline.dicKey = '';
      this.dicline.dicCode = '';
      this.dicline.dicName = '';
      this.dicline.sort = 0
      this.dicline.description = '';
      this.parentId = '';
    },
    editDic(row) {
      this.dicline = JSON.parse(JSON.stringify(row))
      this.isEditor = true
      this.dialogTableVisible = true
    },
    submitDicInfo() {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          const that = this
          this.dialogTableVisible = false
          this.$post({
            url: this.isEditor ? mmUrl.dic.editDic : mmUrl.dic.createDic,
            data: {
              item: this.dicline
            }
          })
            .then(res => {
              this.initGetDate()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              // 操作成功，清空当前对象
              this.dicline.id = '';
              this.dicline.dicKey = '';
              this.dicline.dicCode = '';
              this.dicline.dicName = '';
              this.dicline.sort = 0
              this.dicline.description = '';
              this.parentId = '';
            })
            .catch(err => this.$message.error(err))
        }
      })
    }
  }
}
</script>

<style lang="scss">
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 30px;
}
</style>

